<!-- 车辆详情 -->
<template>
  <div
    class="dashboard-container vehicle-detail"
  >
    <el-card class="search-card-box card-box">
      <el-tabs v-model="activeName" @tab-click="handleClick" class="tab">
        <el-tab-pane label="基本信息" name="first">
          <el-card class="fist-box" v-if="isTrue">
            <el-form ref="driverSearchFormData" :rules="rules" :model="driverSearchFormData">
              <el-row :gutter="60">
                <el-col :span="8">
                  <el-form-item label="车辆编号" style="margin-bottom: 20px" label-width="80px">
                    <label>{{ driverSearchFormData.id }}</label>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="车辆号码" style="margin-bottom: 20px" label-width="80px">
                    <label>{{ driverSearchFormData.licensePlate }}</label>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="车型名称" style="margin-bottom: 20px" label-width="80px">
                    <label>{{ driverSearchFormData.truckTypeName }}</label>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="60">
                <el-col :span="8">
                  <el-form-item label="车辆体积" style="margin-bottom: 20px" label-width="80px">
                    <label>{{ driverSearchFormData.allowableVolume }}</label>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="车辆载重" style="margin-bottom: 20px" label-width="80px">
                    <label>{{ driverSearchFormData.allowableLoad }}</label>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="GPAID" style="margin-bottom: 20px" label-width="80px">
                    <label>{{ driverSearchFormData.deviceGpsId }}</label>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="60">
                <el-col :span="24">
                  <el-form-item label="图片信息" style="margin-bottom: 20px" label-width="80px">
                    <div v-for="(picture, index) in driverSearchFormData.picture" :key="index" class="img-box">
                      <img :src="picture" alt="">
                    </div>
                  </el-form-item>
                </el-col>
              </el-row>

            </el-form>
            <el-footer>
              <el-button type="danger" @click="editList">编辑
              </el-button>
            </el-footer>
          </el-card>
          <el-card class="fist-box" v-else>
            <el-form ref="driverSearchFormData" :model="driverSearchFormData" :rules="rules">
              <el-row :gutter="60">
                <el-col :span="8">
                  <el-form-item label="车辆编号" prop="id" style="margin-bottom: 20px" label-width="80px">
                    <el-input v-model="driverSearchFormData.id" placeholder="请输入内容" disabled />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="车辆号码" prop="licensePlate" style="margin-bottom: 20px" label-width="80px">
                    <el-input v-model="driverSearchFormData.licensePlate" placeholder="请输入内容" />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item
                    label="车型名称"
                    style="margin-bottom: 20px"
                    label-width="80px"
                    prop="truckTypeName"
                  >
                    <el-input v-model="driverSearchFormData.truckTypeName" placeholder="请输入内容" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="60">
                <el-col :span="8">
                  <el-form-item label="车辆体积" prop="allowableVolume" style="margin-bottom: 20px" label-width="80px">
                    <el-input v-model="driverSearchFormData.allowableVolume" placeholder="请输入内容" />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="车辆载重" prop="allowableLoad" style="margin-bottom: 20px" label-width="80px">
                    <el-input v-model="driverSearchFormData.allowableLoad" placeholder="请输入内容" />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="GPAID" prop="deviceGpsId" style="margin-bottom: 20px" label-width="80px">
                    <el-input v-model="driverSearchFormData.deviceGpsId" placeholder="请输入内容" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="60">
                <el-col :span="24">
                  <el-form-item label="图片信息" prop="driverSearchFormData.picture" style="margin-bottom: 20px"
                                label-width="80px"
                  >
                    <div v-for="(picture, index) in driverSearchFormData.picture" :key="index" class="img-box">
                      <img :src="picture" alt="">
                    </div>
                    <div class="img-box" v-if="driverSearchFormData.picture>0">
                      <img class="custom-img" :src="driverSearchFormData.picture" alt="">
                    </div>
                    <div class="img-box">
                      <el-upload
                        class="avatar-uploader"
                        action="https://slwl-api.itheima.net/manager/files/imageUpload"
                        :headers="headers"
                        :show-file-list="false"
                        :auto-upload="true"
                        :on-success="handleImageChange"
                      >
                        <i class="el-icon-plus avatar-uploader-icon upload-images"></i>
                      </el-upload>
                    </div>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
            <el-footer>
              <el-button plain @click="console">取消
              </el-button>
              <el-button type="danger" @click="submitForm">保存
              </el-button>
            </el-footer>
          </el-card>
        </el-tab-pane>
        <el-tab-pane label="行驶证信息" name="second">
          <el-card class="fist-box" v-if="isTrue">
            <el-form ref="vehicleLicenseFormData" :rules="vehicleLicenseRules" :model="vehicleLicenseFormData">
              <el-row :gutter="60">
                <el-col :span="8">
                  <el-form-item label="行驶证号码" style="margin-bottom: 20px" label-width="100px">
                    <label>{{ vehicleLicenseFormData.id }}</label>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="发动机号码" style="margin-bottom: 20px" label-width="100px">
                    <label>{{ vehicleLicenseFormData.engineNumber }}</label>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="注册时间" style="margin-bottom: 20px">
                    <label>{{ vehicleLicenseFormData.registrationDate }}</label>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="60">
                <el-col :span="8">
                  <el-form-item label="报废时间" style="margin-bottom: 20px" label-width="100px">
                    <label>{{ vehicleLicenseFormData.mandatoryScrap }}</label>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="整备质量" style="margin-bottom: 20px" label-width="100px">
                    <label>{{ vehicleLicenseFormData.overallQuality }}</label>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="检验有效期" style="margin-bottom: 20px" label-width="100px">
                    <label>{{ vehicleLicenseFormData.expirationDate }}</label>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="60">
                <el-col :span="8">
                  <el-form-item label="核定载质量" style="margin-bottom: 20px" label-width="100px">
                    <label>{{ vehicleLicenseFormData.allowableWeight }}</label>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="有效期" style="margin-bottom: 20px" label-width="100px">
                    <label>{{ vehicleLicenseFormData.validPeriod }}</label>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="60">
                <el-col :span="24">
                  <el-form-item label="图片信息" style="margin-bottom: 20px" label-width="100px">
                    <div v-for="(picture, index) in vehicleLicenseFormData.picture" :key="index" class="img-box">
                      <img :src="picture" alt="">
                    </div>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
            <el-footer>
              <el-button type="danger" @click="editList">编辑
              </el-button>
            </el-footer>
          </el-card>
          <el-card class="fist-box" v-else>
            <el-form ref="vehicleLicenseFormData" :model="vehicleLicenseFormData" :rules="vehicleLicenseRules">
              <el-row :gutter="60">
                <el-col :span="8">
                  <el-form-item label="行驶证号码" prop="id" style="margin-bottom: 20px" label-width="100px">
                    <el-input v-model="vehicleLicenseFormData.id" placeholder="请输入内容" disabled />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="发动机号码" prop="engineNumber" style="margin-bottom: 20px" label-width="100px">
                    <el-input v-model="vehicleLicenseFormData.engineNumber" placeholder="请输入内容" />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="注册时间" prop="registrationDate" style="margin-bottom: 20px"
                                label-width="100px"
                  >
                    <template>
                      <div class="block">
                        <el-date-picker
                          v-model="vehicleLicenseFormData.registrationDate"
                          type="date"
                          value-format="yyyy-MM-dd"
                          placeholder="选择日期"
                        >
                        </el-date-picker>
                      </div>
                    </template>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="60">
                <el-col :span="8">
                  <el-form-item label="报废时间" prop="mandatoryScrap" style="margin-bottom: 20px" label-width="100px">
                    <template>
                      <div class="block">
                        <el-date-picker
                          v-model="vehicleLicenseFormData.mandatoryScrap"
                          type="date"
                          value-format="yyyy-MM-dd"
                          placeholder="选择日期"
                        >
                        </el-date-picker>
                      </div>
                    </template>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="整备质量" prop="overallQuality" style="margin-bottom: 20px" label-width="100px">
                    <el-input v-model="vehicleLicenseFormData.overallQuality" placeholder="请输入内容" />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="检验有效期" prop="expirationDate" style="margin-bottom: 20px"
                                label-width="100px"
                  >
                    <template>
                      <div class="block">
                        <el-date-picker
                          v-model="vehicleLicenseFormData.expirationDate"
                          type="date"
                          value-format="yyyy-MM-dd"
                          placeholder="选择日期"
                        >
                        </el-date-picker>
                      </div>
                    </template>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="60">
                <el-col :span="8">
                  <el-form-item label="核定载质量" prop="allowableWeight" style="margin-bottom: 20px"
                                label-width="100px"
                  >
                    <el-input v-model="vehicleLicenseFormData.allowableWeight" placeholder="请输入内容" />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="有效期" prop="validPeriod" style="margin-bottom: 20px" label-width="100px">
                    <template>
                      <div class="block">
                        <el-date-picker
                          v-model="vehicleLicenseFormData.validPeriod"
                          type="date"
                          value-format="yyyy-MM-dd"
                          placeholder="选择日期"
                        >
                        </el-date-picker>
                      </div>
                    </template>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="60">
                <el-col :span="24">
                  <el-form-item label="图片信息" prop="vehicleLicenseFormData.picture" style="margin-bottom: 20px"
                                label-width="100px"
                  >
                    <div v-for="(picture, index) in vehicleLicenseFormData.picture" :key="index" class="img-box">
                      <img :src="picture" alt="">
                    </div>
                    <div class="img-box" v-if="vehicleLicenseFormData.picture>0">
                      <img class="custom-img" :src="vehicleLicenseFormData.picture" alt="">
                    </div>
                    <div class="img-box">
                      <el-upload
                        class="avatar-uploader"
                        action="https://slwl-api.itheima.net/manager/files/imageUpload"
                        :headers="headers"
                        :show-file-list="false"
                        :auto-upload="true"
                        :on-success="changePic2"
                      >
                        <i class="el-icon-plus avatar-uploader-icon upload-images"></i>
                      </el-upload>
                    </div>
                  </el-form-item>
                </el-col>
              </el-row>

            </el-form>
            <el-footer>
              <el-button plain @click="console">取消
              </el-button>
              <el-button type="danger" @click="submitLicenseForm">保存
              </el-button>
            </el-footer>
          </el-card>
        </el-tab-pane>
      </el-tabs>
    </el-card>

  </div>
</template>
<script>

import { getVehicleDetail, getVehicleDetailNew, getVehicleLicense, getVehicleLicenseNew } from '@/api/vehicle'
import UploadComponent from '@/components/ImgUpload/index.vue'
import Cookies from 'js-cookie'
import ImageUpload from '@/components/ImgUpload/index.vue'

export default {
  name: 'VehicleDetail',
  components: { ImageUpload, UploadComponent },
  data() {
    return {
      headers: {
        Authorization: Cookies.get('TOKEN')
      },
      activeName: 'first',
      type: '.jpg,.jpeg,.png',
      size: 5,
      disabled: false,
      isShowExampleImg: true,
      driverSearchFormData: {
        id: '',
        truckTypeId: '', // 车型ID
        truckTypeName: '', // 车型名称
        licensePlate: '', // 车牌号码
        deviceGpsId: '', // GPSID
        allowableLoad: '', // 载重
        allowableVolume: '', // 体积
        picture: []
      },
      isTrue: 'true',
      rules: {
        id: [{ required: true, message: '请输入车辆编号', trigger: 'blur' }],
        truckTypeId: [{ required: true, message: '请输入车型ID', trigger: 'blur' }],
        truckTypeName: [{ required: true, message: '请输入车型名称', trigger: 'blur' }],
        licensePlate: [{ required: true, message: '请输入车牌号码', trigger: 'blur' }],
        deviceGpsId: [{ required: true, message: '请输入GPS ID', trigger: 'blur' }],
        allowableLoad: [{ required: true, message: '请输入载重', trigger: 'blur' }],
        allowableVolume: [{ required: true, message: '请输入体积', trigger: 'blur' }]
      },
      vehicleLicenseFormData: {
        id: '',
        engineNumber: '',
        registrationDate: '',
        mandatoryScrap: '',
        expirationDate: '',
        overallQuality: '',
        allowableWeight: '',
        outsideDimensions: '',
        transportCertificateNumber: '',
        validPeriod: '',
        picture: []
      },
      vehicleLicenseRules: {
        id: [{ required: true, message: '请输入内容', trigger: 'blur' }],
        engineNumber: [{ required: true, message: '请输入内容', trigger: 'blur' }],
        registrationDate: [{ required: true, message: '请输入内容', trigger: 'blur' }],
        mandatoryScrap: [{ required: true, message: '请输入内容', trigger: 'blur' }],
        expirationDate: [{ required: true, message: '请输入内容', trigger: 'blur' }],
        overallQuality: [{ required: true, message: '请输入内容', trigger: 'blur' }],
        allowableWeight: [{ required: true, message: '请输入内容', trigger: 'blur' }],
        outsideDimensions: [{ required: true, message: '请输入内容', trigger: 'blur' }],
        transportCertificateNumber: [{ required: true, message: '请输入内容', trigger: 'blur' }],
        validPeriod: [{ required: true, message: '请输入内容', trigger: 'blur' }]
      }
    }
  },
  mounted() {
    this.isTrue = true
    // 获取id
    this.driverSearchFormData.id = this.$route.query.id
    this.vehicleLicenseFormData.id = this.$route.query.id
    this.getList()
    this.getLicenseList()
  },
  methods: {
    handleImageChange(res) {
      this.driverSearchFormData.picture.push(res.data)
    },
    changePic2(res) {
      this.vehicleLicenseFormData.picture.push(res.data)
    },
    formatDate(dateString) {
      const date = new Date(dateString)
      const year = date.getFullYear()
      const month = String(date.getMonth() + 1)
        .padStart(2, '0')
      const day = String(date.getDate())
        .padStart(2, '0')
      return `${year}-${month}-${day}`
    },
    editList() {
      this.isTrue = false
    },
    // 获取车辆详情渲染列表
    async getList() {
      const res = await getVehicleDetail(this.driverSearchFormData.id)
      this.driverSearchFormData.allowableLoad = res.data.allowableLoad
      this.driverSearchFormData.allowableVolume = res.data.allowableVolume
      this.driverSearchFormData.deviceGpsId = res.data.deviceGpsId
      this.driverSearchFormData.licensePlate = res.data.licensePlate
      if (res.data.picture) {
        this.driverSearchFormData.picture = res.data.picture.split(',')
      }
      this.driverSearchFormData.truckTypeId = res.data.truckTypeId
      this.driverSearchFormData.truckTypeName = res.data.truckTypeName
    },
    handleClick(tab, event) {
      console.log(tab, event)
      this.isTrue = true
    },
    console() {
      this.isTrue = true
    },
    submitForm() {
      this.$refs.driverSearchFormData.validate((valid) => {
        if (valid) {
          // 表单验证通过，继续执行保存数据的操作
          const id = this.driverSearchFormData.id
          const data = this.driverSearchFormData
          data.picture = this.driverSearchFormData.picture.join(',')
          getVehicleDetailNew(id, data)
            .then(async () => {
              await this.getList()
              this.$message({
                message: '保存成功',
                type: 'success'
              })
              this.isTrue = true
            })
        } else {
          // 表单验证不通过，可以给出相应的提示或处理
          this.$message.error('表单验证不通过，请检查输入')
        }
      })
    },
    async getLicenseList() {
      const res = await getVehicleLicense(this.vehicleLicenseFormData.id)
      console.log(res.data.picture)
      this.vehicleLicenseFormData.allowableWeight = res.data.allowableWeight
      this.vehicleLicenseFormData.engineNumber = res.data.engineNumber
      this.vehicleLicenseFormData.expirationDate = res.data.expirationDate
      this.vehicleLicenseFormData.mandatoryScrap = res.data.mandatoryScrap
      this.vehicleLicenseFormData.outsideDimensions = res.data.outsideDimensions
      this.vehicleLicenseFormData.overallQuality = res.data.overallQuality
      if (res.data.picture) {
        this.vehicleLicenseFormData.picture = res.data.picture.split(',')
      }
      this.vehicleLicenseFormData.registrationDate = res.data.registrationDate
      this.vehicleLicenseFormData.registrationDate = res.data.registrationDate
      this.vehicleLicenseFormData.transportCertificateNumber = res.data.transportCertificateNumber
    },
    submitLicenseForm() {
      this.$refs.vehicleLicenseFormData.validate((valid) => {
        if (!valid) {
          return false
        }
        const id = this.vehicleLicenseFormData.id
        const data = this.vehicleLicenseFormData
        data.picture = this.vehicleLicenseFormData.picture.join(',')
        getVehicleLicenseNew(id, data)
          .then(async () => {
            await this.getLicenseList()
            this.$message({
              message: '保存成功',
              type: 'success'
            })
            this.isTrue = true
          })
      })
    }
  }

}
</script>

<style lang="scss" scoped>
label {
  color: #818693;
}

.vehicle-detail {
  ::v-deep .el-container {
    flex-direction: column;
    margin-left: 0px;

  }

  .in {
    height: calc(100vh - 205px);
    // height: 100%;
  }

  .aside-box {
    background: #ffffff;
    border-radius: 4px;
    // width: 150px;
    padding: 24px 37px 24px 37px;
    box-sizing: border-box;

    // min-height: calc(100vh - 50px);
    ::v-deep .el-aside {
      padding-bottom: 14px;
      width: 100% !important;
      display: flex;
      background-color: #ffffff;
      border-bottom: 1px solid #E5E7EC;
      text-align: left;
      font-size: 14px;

      .aside-item {
        // margin-top: 38px;
        cursor: pointer;

        &:first-child {
          margin-right: 53px;
          padding-left: 25px;

        }
      }

      .aside-item.active {
        font-size: 16px;
        font-weight: bold;
        color: #20232A;

        &:after {
          content: '';
          display: block;
          background-color: #E15536;
          height: 3px;
          width: 49px;
          margin: 0 auto;
          position: relative;
          top: 14px;
        }
      }
    }
  }
}

.card-box {
  width: 1190px;
  height: 800px !important;
  margin: 0 auto;
}

.tab {
  margin-left: 20px !important;
}

::v-deep .el-tabs__nav {
  .is-active {
    color: #333 !important;
    font-weight: 700 !important;
  }

  .el-tabs__active-bar {
    background-color: #E15536;
  }
}

.fist-box {
  position: relative;
  height: 650px;
  width: 100%;
}

.el-footer {
  position: absolute;
  padding: 20px;
  width: 100%;
  left: 0px;
  bottom: 0px;
  text-align: center;
  border-top: 1px solid #E5E7EC;
}

.custom-img {
  width: 200px !important; /* 设置图片宽度，并使用 !important 来确保优先级 */
  height: 200px !important; /* 设置图片高度，并使用 !important 来确保优先级 */
}

.img-box {
  margin: 0 10px 10px 0;
  display: inline-block;
  vertical-align: top;
  align-items: center;
  width: 200px;
  height: 200px;
  border: 1px solid #D8DDE3;
  text-align: center;
  line-height: 200px;
  font-size: 16px; /* 重新设置合适的字体大小 */
}

.img-box img {
  width: 100%;
  height: 100%;
  cursor: pointer;

  &:hover {
    opacity: 0.8;
  }
}

::v-deep .el-form-item__label {
  text-align: left;
}

.upload-images {
  font-size: 60px;
  color: #ccc;
  transform: translate(6%, 12%);
}
</style>
